<!-- 表格详情 适用于详情查看 -->
<!--
colspan: 1-5, 自己看着调试吧
itemDatas:
[
  [
    { label: '1', prop: '', colspan: 1, rowspan: 1 },
    { label: '2', prop: '', colspan: 1, rowspan: 1 },
    { label: '3', prop: '', colspan: 1, rowspan: 1 }
  ],
  [
    { label: '1', prop: '', colspan: 1, rowspan: 1 },
    { label: '1', prop: '', colspan: 1, rowspan: 1 },
    { label: '1', prop: '', colspan: 1, rowspan: 1 }
  ]
]
-->
<template>
  <table ref="tableDataBox" class="table-data">
    <tbody>
      <tr v-for="(row, index) in itemDatas" :key="index">
        <template v-for="item in row" :key="item.label + item.prop">
          <td
            v-show="!item.labelHidden"
            :colspan="item.labelColspan || 1"
            :class="item.labelClass || ''"
            :rowspan="item.rowspan || 1"
            :style="{ width: item.labelWidth || labelWidth + 'px', 'text-align': item.align || 'center' }"
          >
            <template v-if="item.labelSlot">
              <slot :name="item.labelSlot" :item="item" />
            </template>
            <template v-else>
              {{ item.label }}
            </template>
          </td>

          <td
            v-show="!item.valueHidden"
            v-if="item.prop || item.slot"
            :key="item.prop || index"
            :colspan="item.colspan || 1"
            :class="item.class || ''"
            :rowspan="item.rowspan || 1"
            :style="{ width: item.propWidth || '218px', 'text-align': item.align || 'center' }"
          >
            <template v-if="item.slot">
              <slot :name="item.slot" :item="item" />
            </template>
            <template v-else>
              {{ item.prop ? formDatas[item.prop] : '--' }}
            </template>
          </td>
        </template>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
const props = defineProps({
  itemDatas: {
    type: Array,
    default: () => {
      return [];
    }
  },
  formDatas: {
    type: Object,
    default: () => {
      return {};
    }
  },
  labelWidth: {
    type: Number,
    default: 105
  }
});
</script>

<style lang="scss" scoped>
.table-data tr {
  width: 100%;
}
.table-data tr > td {
  line-height: 30px !important;
}
</style>
